<template>
  <view class="wrapper">
    <view class="main">
      <view class="nothing" v-if="list.length === 0">暂无相关信息...</view>
      <v-list :list="list" :is-my="true" @reset="reset" @close="close" @remove="remove" />
    </view>
  </view>
</template>

<script>
import color from '@/config/color.js'
import config from '@/config/config.js'
import base64 from '../../util/base64'
import Material from '../../api/material'
import List from '@/sub_main/material/components/MaterialList'

const materialModel = new Material()
export default {
  components: {
    'v-list': List
  },
  onLoad() {

    uni.hideTabBar({
      animation: false,
      success: () => {

      },
      fail: () => {

      }
    })
    uni.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: this.activeColor,
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  onShow() {
    this.init()
    this.getList()
  },
  onHide() {
    this.init()
  },
  onReachBottom() {
    this.getList(true)
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      activeColor: color.main_color,
      total: 0,
      queryList: {
        page: 0,
        pageSize: 20,
        busy: false
      },
      categoryList: [],
      categoryChildrenList: [],
      currentIndex: 0,
      currentChildrenIndex: 0,
      // 作品列表
      list: [],
      scrollTop: 0,
    }
  },
  methods: {
    init() {
      this.queryList = {
        page: 0,
        pageSize: 20,
        busy: false
      }
      this.list = []
      this.total = 0
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        uni.showLoading({
          title: '加载中...'
        })
        materialModel.myList({
          ...this.queryList,
          id: this.currentId
        }).then(response => {
          uni.hideLoading()
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
          }
          this.total = data.quantity
          // console.log(this.list.map(x => x.id))
          console.log(this.list)
        }).finally(() => {
          uni.hideLoading()
        })
      }
    },
    reset(item) {
      materialModel.reset({ ...item }).then(() => {
        this.list.forEach(x => {
          if (x.id === item.id) {
            this.$set(x, 'status', 1)
          }
        })
      })
    },
    close(item) {
      materialModel.close({ ...item }).then(() => {
        this.list.forEach(x => {
          if (x.id === item.id) {
            this.$set(x, 'status', 0)
          }
        })
      })
    },
    remove(item) {
      materialModel.remove({ ...item }).then(() => {
        this.list = this.list.filter(x => x.id !== item.id)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main {
  //font-size: 24rpx;
  padding: 20rpx 0;
  .nothing {
    color: #999999;
    font-size: 24rpx;
    //background: white;
    margin: 20rpx;
  }
}
.wrapper {
  min-height: 100vh;
  background: #f3f5f7;
}
</style>
